<template>
    <div class="first_level_page show_validate_page">
        <div class="voucher_box">
            <div class="top">
               <div class="images"><img src="../../images/success_icon.png" alt=""></div>
               <div class="text">您已成功兑换！</div>
               <div class="text2">凭证号码<em>{{voucher.exchangeCode}}</em></div>
            </div>
            <div class="record_box" style="background:#f4f4f4;">
            <ul>
                <li>
                    <img src="../../images/record_bg.png" alt="">
                    <div v-if="voucher.exchangeFlag==0" class="bottom">未领取</div>
                    <div v-else class="bottom">已领取</div>
                    <div class="dw clear">
                        <div class="left">
                            <h2><em>{{voucher.deductAmount}}</em></h2>
                            <p>全场通用</p>
                        </div>
                        <div class="right">
                            <h3 class="truncate">{{voucher.voucherName}}</h3>
                            <p>{{voucher.receiveSellerName}}</p>
                            <p></p>
                        </div>
                    </div>
                </li>

                
            </ul>    
           </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {ExchangeValidate} from 'src/service/getData'

    export default {
        data(){
            return{
                token:'',
                voucherCode:'',
                voucher: '',

            }
        },
        mounted(){
            this.token = this.userInfo.token;
            this.voucherCode = this.$route.query.voucherCode;
            this.memberTicket();
        },
        computed:{
            ...mapState([
                'userInfo',
            ]),
        },
        components: {
        },
        methods: {

            async memberTicket(){
                  let data = await ExchangeValidate(this.token,this.voucherCode);
                  this.voucher = data.data;
                  
            }
        }
    }
</script>

<style type="text/css">
span , em , i{font-style:normal;}
.voucher_box .top{text-align: center;padding-top:.56rem;padding-bottom:.56rem; background: #fff}
.voucher_box .top .images{padding-bottom:.46rem;}
.voucher_box .top img{width:1.3rem;height:1.3rem;}
.voucher_box .text{text-align: center;font-size:.34rem;color:#333;}
.voucher_box .text2{text-align: center;font-size:.28rem;color:#666;margin-top:.3rem;}
.voucher_box .text2 em{color:#ee7859;margin-left:.26rem;}
.voucher_box .btn{width:2.22rem;margin:0 auto;margin-top:.26rem; line-height:.64rem;border-radius:10rem;border:.02rem solid #eee;color:#666;font-size:.26rem;}
.voucher_box .btn:active{background:#f5f5f5;}
.record_box{padding:.22rem .14rem 0 .14rem;}
.record_box ul li{border-radius:.05rem;position:relative;margin-bottom:.22rem;}
.record_box img{width:100%;}
.record_box ul li .dw{position:absolute;width:100%;height:100%;top:0;left:0;font-size:.24rem;}
.record_box ul li .dw .left{width:2rem;text-align: center;margin-top:.5rem;}
.record_box ul li .dw .left h2{font-size:.6rem;color:#ffa101;}
.record_box ul li .dw .left h2 em{font-size:.4rem;}
.record_box ul li .dw .left p{margin-top:.24rem;color:#ffa101;}
.record_box ul li .dw .right{
    -webkit-width:calc(100% - 2.8rem);
    -moz-width:calc(100% - 2.8rem);
    -o-width:calc(100% - 2.8rem);
    width:calc(100% - 2.8rem);
    position:absolute;
    right:.2rem;
    top:.48rem;
    height:50%;
}
.record_box ul li .dw .right h2{font-size:.28rem;color:#333;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.no_data{text-align: center;}
.no_data img{width:30%;}
.truncate{word-wrap:normal;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.record_box ul li .dw .right h3{font-size:.28rem;color:#333;}
.record_box ul li .dw .right p{font-size:.24rem;color:#999;margin-top:.16rem;}
.record_box ul li .bottom{position:absolute;bottom:0;left:0;width:100%; background:#fbfbfb;line-height:.5rem;font-size:.22rem;color:#ee7859;padding:0 .16rem;border-radius:0 0 .08rem .08rem;text-align:right;}


.detail_page{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 202;
    padding-top: 1.95rem;
}


</style>
